<template>
  <div class="loveBox">
    <h2>你爱我吗?</h2>
    <button type="button" @click="love">爱！</button>
    <button ref="btn2" type="button" @mouseover="mouseover">不爱！ </button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    love () {
      this.$confirm('我不爱你?', '哈哈', {
        confirmButtonText: '气？',
        cancelButtonText: '不气？',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '气死你!'
        })
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '呕!'
        })
      })
    },
    mouseover () {
      const dom = this.$refs.btn2
      const screenw = this.$utils.common.getTargetWH(document.querySelector('.loveBox')).width
      const screenh = this.$utils.common.getTargetWH(document.querySelector('.loveBox')).height
      const l = screenw - dom.offsetWidth
      const t = screenh - dom.offsetHeight
      dom.style.position = 'absolute'
      dom.style.left = (Math.random() * l * 5).toFixed() + 'px'
      dom.style.top = (Math.random() * t).toFixed() + 'px'
    }
  }
}
</script>

<style lang="less" scoped>
  .loveBox {
    height: 200px;
    width: 300px;
    margin: 100px auto;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 #FCC8C9
  }

  h2 {
    height: 80px;
    line-height: 80px;
    margin-bottom: 20px;
    color: red
  }

  button {
    height: 50px;
    width: 100px;
  }
</style>
